<template>
  <div>
    <div class="f-icon-serch">
      <el-input v-model="name" placeholder="请输入图标名称" clearable  @input.native="filterIcons" @clear="filterIcons">
        <i slot="suffix" class="el-icon-search el-input__icon" />
      </el-input>
    </div>
    <div class="f-icon-list">
      <div class="f-icon" v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
        <i :class="item"></i>
        <span>{{item}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import IconArray from '../f-iconSelect/f-icon.json'
export default {
  name: 'FIconSelect',
  data () {
    return {
      name: '',
      iconList: IconArray
    }
  },
  methods: {
    filterIcons () {
      this.iconList = IconArray
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    selectedIcon (name) {
      this.$emit('selected', name)
      document.body.click()
    },
    reset () {
      this.name = ''
      this.iconList = IconArray
    }
  }
}
</script>
<style scoped>
  .f-icon-serch{
    margin-bottom: 10px;
  }
  .f-icon-list {
    height: 200px;
    overflow-y: auto;
  }
  .f-icon {
    height: 31px;
    line-height: 30px;
    border-radius: 5px;
    width: 200px;
    margin-top: 5px;
    cursor: pointer;
    float: left;
  }
  .f-icon:hover{
    color: #409EFF;
  }
</style>
